<template>
    <div class="nav-container">
        <slot></slot>
      <el-card  :class="controlFoldNavbar ? 'nav-card naverCard':'nav-card'">
        <slot name="navContent"></slot>
        <div :title="M2('点击加载更多')" class="up-text up-text-c" v-if="upDownshow && controlFoldNavbar" @click="clickMoreFilter">∨</div>
        <div :title="M2('点击收缩')" class="down-text" v-if="!upDownshow && controlFoldNavbar" @click="clickMoreFilter(1)">∧</div>
      </el-card>
      <el-card class="mainTable-card">
         <slot name="mainContent"></slot>
      </el-card>
    </div>
</template>
<script>
export default {
    name:'commonTPage',
    data(){
        return {
            upDownshow:true,
        }
    },
    props:{
        controlFoldNavbar:{
            type:Boolean,
            default:false,
        }
    },
    methods: {
        clickMoreFilter (id) {
            let naverCard = document.querySelector('.naverCard')
            if( id == 1) {
                naverCard.style.overflow = 'hidden'
                this.upDownshow = true
            }else {
                naverCard.style.overflow = 'visible'
                this.upDownshow = false
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.nav-container {
    width: 100%;
    height: 100%;
    padding: 0px 5px 5px 5px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    background-color: rgba(230, 230, 230, 1);
    ::v-deep .nav-card {
        margin: 0px 5px;
        z-index: 999;
        .el-card__body{
            padding: 0px 0px;
        }
    }
    .up-text,.down-text {
        width:100%;
        background: #EAEDED;
        font-weight: bold;
        color: #3366cc;
        text-align: center;
        font-size: 15px;
        height: 12px;
        line-height: 10px;
        z-index: 1111;
        display: inline-block;
        position: absolute;
        margin: 0px;
        cursor: pointer;
        border-bottom: 1px solid #3366cc;
        border-top: 1px solid #ddd;
        line-height: 9px;
            &:hover {
            background: #9BAFBF;
            color: #fff;
        }
    }
    .up-text-c {
        top: 133px;
    }
    .naverCard {
        position: relative;
        height: 147px;
        overflow: hidden;
        background: #fff;
        z-index: 2000;
        opacity: 0.9;
        flex-shrink: 0;
    }
    .naverCard .el-card__body {
        background: #fff;
    }
    ::v-deep.mainTable-card {
        margin: 0px 5px;
        position: relative;
        .el-card__body{
            padding: 5px 20px 40px 20px;
            overflow-y: auto;
        }
    }
}
</style>